<template>
  <el-container>
    <el-header class="header">
      <div class="left">
        <div class="item">
          <span>用户姓名：</span>
          <el-input class="com-input" placeholder="请输入用户姓名" v-model="userName" />
        </div>
        <div class="item">
          <span class="user-num">手机号：</span>
          <el-input class="com-input" placeholder="请输入用户手机号" v-model="mobile" />
          <span class="user-num">保单号：</span>
          <el-input class="com-input" placeholder="请输入用户保单号" v-model="cardNum" />
        </div>
        <div class="area item">
          <span>证件号码：</span>
          <el-input class="com-input" placeholder="请输入用户证件号码" v-model="paper" />
          <span>所属企业：</span>
          <el-select v-model="companyId" class="com-input" placeholder="全部">
            <el-option v-for="item in companys" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="area address item">
          <span class="text">地区：</span>
          <user-address ref="listAddress"/>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" icon="el-icon-search" @click="search" class="btn">查询</el-button>
        <el-button type="primary" @click="addCom" class="btn">新增用户</el-button>
      </div>
    </el-header>
  </el-container>
</template>
<script>
import { getCompany } from 'data/listBody';
import { companys } from "../../../../data/userManage";
import queryList from "utils/queryList";
import UserAddress from "../../../../components/address";
export default {
  name: "listOptions",
  data() {
    return {
      companys:[],
      userName:'',
      mobile:'',
      cardNum:'',
      paper:'',
      companyId:'',
    };
  },
  components: {
    UserAddress
  },
  mounted(){
    this.dataInit()
  },
  methods: {
    dataInit(){
      getCompany(res => {
        this.companys = res.list;
      })
    },
    addCom() {
      this.$router.push("addUser?type=add");
    },
    search(){
      this.$emit("search");
    },
    getData(){
      let params = {
        userName: this.userName, 
        mobile: this.mobile, 
        cardNum: this.cardNum, 
        paper: this.paper, 
        companyId: this.companyId, 
      }
      return this.lodash.assign({},params,this.$refs.listAddress.getData());
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./../../../../assets/less/color.less");
.header {
  display: flex;
  text-align: left;
  border-bottom: 1px solid @border-gray;
  height: inherit !important;
  padding-bottom: 10px;
  flex-wrap: wrap;  
  .user-num{
    display: inline-block;
    text-indent: 1em;
  }
  .item{
    padding: 10px;
    &:first-child{
      padding-top: 0;
    }
  }
  .area {
    .text {
      display: inline-block;
      text-indent: 2em;
      min-width: 80px;
    }
    &.address{
      display: flex;
      align-items: center;
    }    
  }
  .com-input {
    width: 210px;
    margin-right: 20px;
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 20px;
    }
  }
}
</style>